<template>
    <div>
		<Top :title="title"></Top>
		<div class="content">
			<!-- 图片 -->
			<div class="banner">
				<img :src="img" alt="">
			</div>
			<!-- 简介 -->
			<div class="detail">
				<div class="title">影片简介</div>
				<div class="director">导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演： {{detailList.director}}</div>
				<div class="actors">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演： <span v-for="item in detailList.actors"> {{item.name}} | </span></div>
				<div class="lang">地区语言： {{detailList.nation}}（{{detailList.language}}）</div>
				<div class="classfiy">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型： {{detailList.category}}</div>
				<div class="date">上映时间： {{detailList.premiereAt | formatDate}}</div>
				<div class="txt">{{detailList.synopsis}}</div>
			</div>
			<div class="buy">
				<a href="#"><button>立即购票</button></a>
			</div>						
		</div>
	</div>
</template>

<script>
    import $ from 'jquery';
	import Top from '../Top.vue';
    export default{
		components:{
			Top
		},
        data:function(){
            return{
				title:'',
                detailList:'',
				img:''
            }
        },
		filters:{
			'formatDate':function(val){
				var time=new Date(val);
				var m=time.getMonth()+1;
				var d=time.getDate();
				return m+'月'+d+'日上映';
			}
		},
        mounted:function(){
            var self=this;
            var now=new Date().getTime();
            // ajax请求得到影片详细信息
            $.get('http://localhost:3000/'+ this.$route.params.id +'?time='+now,function(res){
				self.img=res.data.film.cover.origin;
				self.title=res.data.film.name;
                self.detailList=res.data.film;
            })	 	
        }
    }
</script>